'use strict'
const SYMBOLS = " ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890-=~!@#$%^&*()_+[]{};:'|,./<>?/\\"
const COLORS_ELEMENTS = ["rgb(60, 0, 30)", "rgb(140, 9, 70)"]

// DOM Elements
const btnGeneratorDOMElement = document.querySelector('.btnGenerator');
const btnBackgroundDOMElement = document.querySelector('.btnBackground');
const tableDOMElement = document.querySelector('.table')
const stringsDOMElement = document.querySelector('.string')
const columsDOMElement = document.querySelector('.column')
const sizeDOMElement = document.querySelector('.size')


function generatorTable() {
  // values inputs
  let strings = stringsDOMElement.value
  let colums = columsDOMElement.value

  tableDOMElement.innerHTML = ''

  for(let i = 0; i < strings; i++) {
    let tr = document.createElement("tr")
    tableDOMElement.append(tr)

    for(let j = 0; j < colums; j++) {
      let randomSymbol = SYMBOLS[randomIndex(SYMBOLS.length)]
      let randomColor = COLORS_ELEMENTS[randomIndex(COLORS_ELEMENTS.length)]

      tr.innerHTML += `
        <td style="background: ${randomColor}">
          ${randomSymbol}
        </td>`
    }
  }
}

function getSize(event) {
  let target = event.target

  // input's limits
  if (!target.value) event.target.value = 1
  if (target.value < 1) target.value = 1
  if (target.value > 90) target.value = 90

  // values inputs
  let strings = stringsDOMElement.value
  let colums = columsDOMElement.value
  sizeDOMElement.innerHTML = `Количество символов:  ${strings * colums}`
}

function randomIndex(length) {
  let random = 0 + ~~(Math.random() * length)
  return random
}

function disableBackground() {
  document.body.style.background = "none"
}


// events btn's
btnGeneratorDOMElement.addEventListener('click', generatorTable)
btnBackgroundDOMElement.addEventListener('click', disableBackground)

// events input's
stringsDOMElement.addEventListener('input', getSize)
columsDOMElement.addEventListener('input', getSize)

generatorTable()
